<template>
  <div class="footerContent">
    <div class="section">
      <!-- 联系我们内容 -->
      <div class="contact_content">
        <div class="contact_center">
          <!-- 指南、政策、服务、关于我们 -->
          <div class="guide">
            <div class="guide_list" v-for="(value, index) in guideList" :key="index">
              <h4 class="guide_title">{{ value.title }}</h4>
              <p class="guide_option" v-for="(item, i) in value.option" :key="i">{{ item }}</p>
            </div>
          </div>
          <!-- 联系电话、地址邮箱、二维码等.. -->
          <div class="merchantInfo">
            <!-- 左边电话、邮箱、QQ -->
            <div class="leftInfo">
              <!-- 电话 -->
              <div class="phone">
                <!-- 小图标 -->
                <div class="icon">
                  <img src="../assets/image/1_0_icon_dianhuazixun.png" alt />
                </div>
                <!-- 显示的作用 -->
                <div class="msgInfo">
                  <p>联系电话</p>
                  <p>XXX-XXXX-XXXX</p>
                </div>
              </div>
              <!-- 邮箱 -->
              <div class="email">
                <!-- 小图标 -->
                <div class="icon">
                  <img src="../assets/image/1_0_icon_foot_youxiangdizhi.png" alt />
                </div>
                <!-- 显示的作用 -->
                <div class="msgInfo">
                  <p>邮箱地址</p>
                  <p>XXX-XXXX-XXXX</p>
                </div>
              </div>
              <!-- QQ -->
              <div class="penguin">
                <!-- 小图标 -->
                <div class="penguin_icon">
                  <img src="../assets/image/1_0_icon_foot_zaixiankefu.png" alt />
                </div>
                <!-- 显示的作用 -->
                <div class="msgInfo">
                  <p>在线客服</p>
                  <p>XXX-XXXX-XXXX</p>
                </div>
              </div>
            </div>
            <!-- 右边二维码 -->
            <div class="right_code">
              <div class="code_img">
                <img src="../assets/image/1_0_icon_erweima.png" alt />
              </div>
              <p>扫码体验XXXX小程序</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部商标、链接 -->
      <div class="brand">
        <div class="brand_center">
          <div class="interlinkage">
            <p>友情链接：</p>
            <span v-for="(item, index) in linkList" :key="index">{{ item }}</span>
          </div>
          <div class="trademark">
            <p>
              Copyright© 2012-2019 版权所有 XXXXXXXXX有限公司 苏ICP证XX-XXXXXXXX
              苏ICP备XXXXXXXXXX
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
export default Vue.extend({
  name: "footerContent",
  data() {
    return {
      guideList: [
        //指南、政策、服务、关于我们列表
        {
          title: "购物指南",
          option: ["购物流程", "会员认证", "发票须知", "支付方式", "常见问题"]
        },
        {
          title: "配送政策",
          option: ["配送说明", "配送须知", "验货签收", "配送答疑"]
        },
        {
          title: "售后服务",
          option: ["退换货范围", "退换货规则", "退款说明", "售后联系方式"]
        },
        {
          title: "关于我们",
          option: ["公司介绍", "联系方式"]
        }
      ],
      linkList: [
        "链接1",
        "|",
        "链接2",
        "|",
        "链接3",
        "|",
        "链接4",
        "|",
        "链接5",
        "|",
        "链接6",
        "|",
        "链接7",
        "|",
        "链接8"
      ] //底部链接
    };
  },
  methods: {}
});
</script>
<style lang="scss" scoped>
.section {
  height: 310px;
  // 联系我们内容
  .contact_content {
    height: 80%;
    background: #fff;
    .contact_center {
      max-width: 1200px;
      min-width: 1020px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      // 指南、政策、服务、关于我们
      .guide {
        width: 56%;
        height: 80%;
        display: flex;
        justify-content: space-around;
        margin: 28px 0;
        text-align: start;
        // 每个小标题下的选项
        .guide_option {
          font-size: 13px;
          margin: 12px 0 !important;
          cursor: pointer;
          &:hover {
            color: #409eff;
          }
        }
      }
      // 联系电话、地址邮箱、二维码等..
      .merchantInfo {
       
        width: 34%;
        height: 80%;
        display: flex;
        padding: 22px 8px 0 0;
        justify-content: space-between;
        margin: 28px 0 0 50px;
        // 左边电话、邮箱、QQ
        .phone,
        .email,
        .penguin {
          display: flex;
          margin-bottom: 16px;
          height: 44px;
          cursor: default;
          //   小图标
          .icon {
            width: 24px;
            height: 20px;
            margin-right: 8px;
          }
          //  QQ小图标
          .penguin_icon {
            width: 24px;
            height: 24px;
            margin-right: 8px;
          }
          //    电话、邮箱、QQ信息
          .msgInfo {
            font-size: 14px;
      
            margin-top: -16px;    
            & p:nth-of-type(1) {
              font-weight: bold;
            }
            & p:nth-of-type(2) {
              margin-top: -10px;
            }
          }
        }
        // 右边二维码
        .right_code {
          font-size: 12px;
          .code_img {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            padding: 5px;
            margin: 10px 0;
            & img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  // 底部商标、链接
  .brand {
    min-width: 1020px;
    height: 20%;
    background: #575963;
    color: #8f93a2;
    font-size: 13px;
    text-align: start;
    //  内容居中呈现
    .brand_center {
      // border: 1px solid red;
      max-width: 1200px;
      min-width: 1020px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 12px 30px;
      box-sizing: border-box;
      line-height: 2px;
      //   友情链接
      .interlinkage {
        display: flex;
        align-items: center;
        // 链接文字
        & span {
          cursor: pointer;
          margin: 0 3px;
          //   链接悬浮样式
          &:hover {
            color: #409eff;
          }
        }
      }
      //  商标权
      .trademark {
        cursor: default;
      }
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.leftInfo{
  margin-top: 4px;
}
</style>
